<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link href="./css/reset.css" rel="stylesheet">
    <link href="./css/index.css" rel="stylesheet">
</head>
<body>
    <!-- 首页头部位置 -->
<div class="header">
    <div class="header-frist">
        <img src="./image/logo.png" class="header-logo">
    </div>
    <!-- 版心 -->
    <div class="header-c">
        <ul class="header-items">
            <li class="item-list actived"><a  href="#" class="item-link">首页</a></li>
            <li class="item-list left"><a  href="#" class="item-link">女装</a></li>
            <li class="item-list  left"><a href="#"  class="item-link">男装</a></li>
            <li class="item-list left"><a  href="#" class="item-link">箱包</a></li>
            <li class="item-list left"><a  href="#" class="item-link">配饰</a></li>
        </ul>
        <input type="text" class="header-seacher" placeholder="搜索商品名/商品编号">
        <div class="header-right">
            <a href="#" class="right-link"><img src="./image/like.png" class="right-img"></a>
            <a href="#" class="right-link"><img src="./image/shopping.png" class="right-img"></a>
            <a href="#" class="right-link"><img src="./image/person.png" class="right-img"></a>
        </div>
    </div>
</div>
<!-- 内容区域 -->
<div class="banner"><img class="banner-img" src="./image/banner.jpg"></div>
<div class="banner-font">
<a href="#" class="font-link">   <img class="font-img" src="./image/fanish.png"></a> 
</div>
<div class="content-product">
    <ul class="product-items">
        <li class="item-list">
            <a class="item-link" href="#">
                <img  class="product-img" src="./image/product.png">
                <p class="product-desc">秋冬男装 摇粒绒松紧卫衣【休闲卫衣保暖抓绒】 </p>
                <p class="product-size">【S-XL】</p>
                <span class="product-preice">¥499</span>
                <img class="product-islike" src="./image/like.png">
                <img class="product-cart" src="./image/shopping.png">
            </a>
        </li>
        <li class="item-list inner-margin">
            <a class="item-link" href="#">
                <img  class="product-img" src="./image//product.png">
                <p class="product-desc">秋冬男装 摇粒绒松紧卫衣【休闲卫衣保暖抓绒】 </p>
                <p class="product-size">【S-XL】</p>
                <span class="product-preice">¥499</span>
                <img class="product-islike" src="./image/like.png">
                <img class="product-cart" src="./image/shopping.png">
            </a>
        </li>
        <li class="item-list">
            <a class="item-link" href="#">
                <img  class="product-img" src="./image//product.png">
                <p class="product-desc">秋冬男装 摇粒绒松紧卫衣【休闲卫衣保暖抓绒】 </p>
                <p class="product-size">【S-XL】</p>
                <span class="product-preice">¥499</span>
                <img class="product-islike" src="./image/like.png">
                <img class="product-cart" src="./image/shopping.png">
            </a>
        </li>
        <li class="item-list">
            <a class="item-link" href="#">
                <img  class="product-img" src="./image//product.png">
                <p class="product-desc">秋冬男装 摇粒绒松紧卫衣【休闲卫衣保暖抓绒】 </p>
                <p class="product-size">【S-XL】</p>
                <span class="product-preice">¥499</span>
                <img class="product-islike" src="./image/like.png">
                <img class="product-cart" src="./image/shopping.png">
            </a>
        </li>
        <li class="item-list inner-margin">
            <a class="item-link" href="#">
                <img  class="product-img" src="./image//product.png">
                <p class="product-desc">秋冬男装 摇粒绒松紧卫衣【休闲卫衣保暖抓绒】 </p>
                <p class="product-size">【S-XL】</p>
                <span class="product-preice">¥499</span>
                <img class="product-islike" src="./image/like.png">
                <img class="product-cart" src="./image/shopping.png">
            </a>
        </li>
        <li class="item-list">
            <a class="item-link" href="#">
                <img  class="product-img" src="./image//product.png">
                <p class="product-desc">秋冬男装 摇粒绒松紧卫衣【休闲卫衣保暖抓绒】 </p>
                <p class="product-size">【S-XL】</p>
                <span class="product-preice">¥499</span>
                <img class="product-islike" src="./image/like.png">
                <img class="product-cart" src="./image/shopping.png">
            </a>
        </li>
    </ul>
</div>
<div class="banner-hotsale">
   <a href="#" class="hot-sale-link"> <img class="hotsale-img" src="./image/hot sale.png">
    </a>
</div>
<div class="content-product">
    <ul class="product-items">
        <li class="item-list">
            <a class="item-link" href="#">
                <img  class="product-img" src="./image//product.png">
                <p class="product-desc">秋冬男装 摇粒绒松紧卫衣【休闲卫衣保暖抓绒】 </p>
                <p class="product-size">【S-XL】</p>
                <span class="product-preice">¥499</span>
                <img class="product-islike" src="./image/like.png">
                <img class="product-cart" src="./image/shopping.png">
            </a>
        </li>
        <li class="item-list inner-margin">
            <a class="item-link" href="#">
                <img  class="product-img" src="./image//product.png">
                <p class="product-desc">秋冬男装 摇粒绒松紧卫衣【休闲卫衣保暖抓绒】 </p>
                <p class="product-size">【S-XL】</p>
                <span class="product-preice">¥499</span>
                <img class="product-islike" src="./image/like.png">
                <img class="product-cart" src="./image/shopping.png">
            </a>
        </li>
        <li class="item-list">
            <a class="item-link" href="#">
                <img  class="product-img" src="./image//product.png">
                <p class="product-desc">秋冬男装 摇粒绒松紧卫衣【休闲卫衣保暖抓绒】 </p>
                <p class="product-size">【S-XL】</p>
                <span class="product-preice">¥499</span>
                <img class="product-islike" src="./image/like.png">
                <img class="product-cart" src="./image/shopping.png">
            </a>
        </li>
        <li class="item-list">
            <a class="item-link" href="#">
                <img  class="product-img" src="./image//product.png">
                <p class="product-desc">秋冬男装 摇粒绒松紧卫衣【休闲卫衣保暖抓绒】 </p>
                <p class="product-size">【S-XL】</p>
                <span class="product-preice">¥499</span>
                <img class="product-islike" src="./image/like.png">
                <img class="product-cart" src="./image/shopping.png">
            </a>
        </li>
        <li class="item-list inner-margin">
            <a class="item-link" href="#">
                <img  class="product-img" src="./image//product.png">
                <p class="product-desc">秋冬男装 摇粒绒松紧卫衣【休闲卫衣保暖抓绒】 </p>
                <p class="product-size">【S-XL】</p>
                <span class="product-preice">¥499</span>
                <img class="product-islike" src="./image/like.png">
                <img class="product-cart" src="./image/shopping.png">
            </a>
        </li>
        <li class="item-list">
            <a class="item-link" href="#">
                <img  class="product-img" src="./image//product.png">
                <p class="product-desc">秋冬男装 摇粒绒松紧卫衣【休闲卫衣保暖抓绒】 </p>
                <p class="product-size">【S-XL】</p>
                <span class="product-preice">¥499</span>
                <img class="product-islike" src="./image/like.png">
                <img class="product-cart" src="./image/shopping.png">
            </a>
        </li>
    </ul>
</div>
<div class="page-icon">
    <div class="icon-right">
    </div>

</div>
<div class="model-content">
<div class="page-info">
    <p class="info-title"><a href="#" class="info-link">信息媒介</a></p>
    <p class="info-title2"><a href="#" class="info-link">information</a></p>
</div>
<ul class="info-list">
    <li class="list-item">
        <a class="item-link" href="#">实体店资讯</a>
    </li>
    <li class="list-item left">
        <a class="item-link" href="#">最新消息</a>
    </li>
    <li class="list-item left">
        <a class="item-link" href="#">招募资讯</a>
    </li>
    <li class="list-item left">
        <a class="item-link" href="#">订阅电子报</a>
    </li>
    <li class="list-item">
        <a class="item-link" href="#">注册会员</a>
    </li>
    <li class="list-item left">
        <a class="item-link" href="#">网络商店FAQ</a>
    </li>
    <li class="list-item left">
        <a class="item-link" href="#">关注BALANCE</a>
    </li>
    <li class="list-item left">
        <a class="item-link" href="#">政府政令</a>
    </li>
</ul>
</div>
<!-- 底部区域 -->
<div class="footer">
    <div class="footer-c">
       <a class="footer-link"> <img class="link-img" src="./image/logo.png"></a>
       <ul class="type-list">
        <li class="items">
            <a href="#" class="items-link">门店资讯</a>
        </li>
        <li class="items-line">|</li>
        <li class="items">
            <a href="#" class="items-link">网络购物FAQ</a>
        </li>
        <li class="items-line">|</li>        
        <li class="items">
            <a href="#" class="items-link">关于BALANCE</a>
        </li>
        <li class="items-line">|</li>        
        <li class="items">
            <a href="#" class="items-link">电子报订阅</a>
        </li>
        <li class="items-line">|</li>        
        <li class="items">
            <a href="#" class="items-link">买卖定型化契约</a>
        </li>
        <li class="items-line">|</li>        
        <li class="items">
            <a href="#" class="items-link">政府令宣传</a>
        </li>  
    </ul>
    <p class="footer-c-desc">
      <a class="link-desc" href="#">Copyright © BALANCE Ltd. All rights reserved</a>  
    </p>
    <div class="footer-box">
    <a class="footer-tdc"> <img class="link-img" src="./image/logo-erweima .png"></a>
    <a class="footer-tdc"> <img class="link-img" src="./image/erweima.png"></a>
    </div>
</div>
</div>
</body>
</html>